<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <style>
            .nj-active{
                background: skyblue;
            }
        </style>
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-link to="/one" tag="button">切换到第一个界面</router-link>
            <router-link to="/two" tag="button">切换到第二个界面</router-link>
            <router-view></router-view>
        </div>
        <template id="one">
            <div>
                <p>我是第一页面</p>
                <router-link to="/one/onesub1" tag="button">切换到第一个界面</router-link>
                <router-link to="/one/onesub2" tag="button">切换到第二个界面</router-link>

                <router-view></router-view>
            </div>
        </template>
        <template id="onesub1">
            <div class="onesub1page">
                <p>我是第一个界面的子界面1</p>
            </div>
        </template>
        <template id="onesub2">
            <div class="onesub1page">
                <p>我是第一个界面的子界面2</p>
            </div>
        </template>
        <template id="two">
            <div>
                <p>我是第二个界面</p>
            </div>
        </template>
        <script>
            const onesub1 = {
                template:"#onesub1"
            }
            const onesub2 = {
                template:"#onesub2"
            }
            const one = {
                template:"#one",
                components:{
                    onesub1,
                    onesub2
                },
                created() {
                    console.log(this.$route.query);
                },
            }
            const two = {
                template: "#two",
                created() {
                    console.log(this.$route.params.age);
                    console.log(this.$route.params.name);
                },
            }

            const routes = [
                // { path: '/', redirect: '/one' },
                {
                    path : '/one', 
                    component: one,
                    children:[
                        {
                            path:"onesub1",
                            component: onesub1
                        },
                        {
                            path:"onesub2",
                            component: onesub2
                        }
                    ]
                },
                {path : '/one/onesub1', component: onesub1},
                {path : '/one/onesub2', component: onesub2},
                {path: '/two', component: two}
            ]
            const router = new VueRouter({
                routes: routes,
                linkActiveClass: "nj-active"
            })

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                },
                router: router,
                comments:{
                    "one":one,
                    "two":two
                }
            });
        </script>
    </body>
</html>